<template>
  <q-header
    reveal
    @reveal="
      (reveal) => {
        headReveal = reveal;
      }
    "
    :class="$q.dark.mode ? 'q-dark' : 'bg-grey-1 text-black'"
  >
    <q-toolbar class="h-50px q-px-md">
      <q-space  />
      <q-btn
        to="/"
        round
        dense
        flat
        :ripple="false"
        icon="cookie"
        size="19px"
        color="blue-4"
        class="q-mr-sm"
        no-caps
      />
      <q-tabs v-model="tab" class="q-pl-lg gt-sm">
        <q-tab
          :name="item.name"
          v-for="item in tabList"
          :label="item.label"
          :key="item.name"
          @click="
            () => {
              router.push(item.to);
            }
          "
        />
      </q-tabs>

      <q-space />

      <SearchInput></SearchInput>

      <q-btn dense flat class="gt-xs">
        <div class="row items-center no-wrap">
          <q-btn-dropdown
            dense
            v-if="webStore.isLogin"
            to="/add-blog"
            target="_blank"
            split
            class="glossy"
            color="primary"
            label="写文章"
          >
            <q-list dense>
              <q-item clickable to="/creation" v-close-popup>
                <q-item-section>
                  <q-item-label>创作中心</q-item-label>
                </q-item-section>
              </q-item>
            </q-list>
          </q-btn-dropdown>
        </div>
      </q-btn>

      <div class="q-pl-sm q-gutter-sm row items-center no-wrap gt-xs">
        <q-btn
          dense
          flat
          size="12px"
          :color="$q.dark.isActive ? '' : 'grey-8'"
          round
          @click="themeToggle"
          :icon="$q.dark.isActive ? 'dark_mode' : 'wb_sunny'"
        />

        <NotifBtn v-if="webStore.isLogin"></NotifBtn>
        <ChatBtn v-if="webStore.isLogin"></ChatBtn>

        <q-avatar
          text-color="grey-6"
          v-if="!webStore.isLogin"
          @click="
            () => {
              loginDig = true;
            }
          "
        >
          <q-icon size="35px" name="account_circle" />
        </q-avatar>
        <q-btn dense flat no-wrap v-else>
          <q-avatar size="35px">
            <q-img
              :src="webStore.userInfo.avatar"
              errorSrc="/images/default-avatar.png"
            />
          </q-avatar>
          <q-menu auto-close class="w-280px">
            <q-card flat>
              <q-card-section>
                <div class="row justify-center">
                  <q-avatar size="80px">
                    <q-img
                      :src="webStore.userInfo.avatar"
                      :ratio="1 / 1"
                      errorSrc="/images/default-avatar.png"
                    />
                  </q-avatar>
                </div>
              </q-card-section>
              <q-card-section>
                <div class="column items-center">
                  <div>
                    {{ webStore.userInfo.username }}
                  </div>
                  <div class="text-caption">
                    个人简介： {{ webStore.userInfo.summary }}
                  </div>
                </div>
              </q-card-section>

              <q-card-section>
                <div class="row justify-around">
                  <q-btn
                    flat
                    :to="{
                      path: '/personal/' + webStore.userInfo.id + '/follow',
                    }"
                  >
                    <div>
                      <div>{{ webStore.userInfo.favUserNum }}</div>
                      <div>关注</div>
                    </div>
                  </q-btn>
                  <q-btn
                    flat
                    :to="{
                      path: '/personal/' + webStore.userInfo.id + '/fans',
                    }"
                  >
                    <div>
                      <div>{{ webStore.userInfo.fansNum }}</div>
                      <div>粉丝</div>
                    </div>
                  </q-btn>
                </div>
              </q-card-section>
              <q-separator />
              <q-card-section>
                <q-item
                  dense
                  clickable
                  :to="{
                    path: '/personal/' + webStore.userInfo.id + '/create',
                  }"
                >
                  <q-item-section>个人主页</q-item-section>
                </q-item>
                <q-item dense clickable to="/setting">
                  <q-item-section>设置</q-item-section>
                </q-item>
                <q-item
                  dense
                  v-if="webStore.isLogin"
                  clickable
                  @click="
                    () => {
                      logout();
                    }
                  "
                >
                  <q-item-section>退出账号</q-item-section>
                </q-item>
              </q-card-section>
            </q-card>
          </q-menu>
        </q-btn>
      </div>
      <q-space  />
    </q-toolbar>
  </q-header>
</template>

<script setup lang="ts">
import SearchInput from './SearchInput.vue';
import NotifBtn from './notice/NotifBtn.vue';
import ChatBtn from './chat/ChatBtn.vue';
import { onMounted, ref } from 'vue';
import { useQuasar } from 'quasar';
import { useWebStore } from 'src/stores/webStore';
import { storeToRefs } from 'pinia';
import { authLogout } from 'src/service/api';
import { useRoute, useRouter } from 'vue-router';
import { watch } from 'vue';

const webStore = useWebStore();
const { headReveal, loginDig } = storeToRefs(webStore);
const $q = useQuasar();
const router = useRouter();
const route = useRoute();

onMounted(() => {
  handlePath(route.path);
  webStore.refreshUserInfo();
});

/* 监听路由 */
watch(
  () => route.path,
  (val) => {
    handlePath(val);
  },
);

const handlePath = (val: string) => {
  if (val) {
    if (val == '/') {
      tab.value = 'home';
    } else if (val.indexOf('/tag') != -1) {
      tab.value = 'tag';
    } else if (val.indexOf('/topic') != -1) {
      tab.value = 'topic';
    } else if (val.indexOf('/ranking') != -1) {
      tab.value = 'ranking';
    } else {
      tab.value = 'home';
    }
  }
};

const themeToggle = () => {
  if ($q.dark.isActive) {
    $q.dark.set(false);
    document.documentElement.classList.remove('dark');
  } else {
    $q.dark.set(true);
    document.documentElement.classList.add('dark');
  }
};

const logout = async () => {
  const { error } = await authLogout();
  if (!error) {
    webStore.logout().then(async () => {
      await router.replace('/');
      location.reload();
    });
  }
};

// 首页面Tab
const tabList = [
  { label: '主页', name: 'home', to: '/' },
  { label: '标签', name: 'tag', to: '/tag' },
  { label: '话题', name: 'topic', to: '/topic' },
  { label: '排行', name: 'ranking', to: '/ranking/readArticle' },
];

// 主页
const tab = ref('home');
</script>

<style scoped></style>
